<template>
  <div class="color-picker">
    <div class="color-show" @click="shoePicker">
      <div class="color-item" :style="{'background-color': themeColer}"/>
    </div>
    <Sketch
        style="position: absolute; z-index: 1"
        v-model="themeColer"
        v-show="showSelColor"
        @changButton="changeColor"
    />
  </div>
</template>

<script setup lang="ts">
  import {Sketch} from '@ans1998/vue3-color';
  const props = defineProps({
    theme: {
      type: String,
      default: "#000"
    }
  })
  const emit = defineEmits(['changeColor'])

  const themeColer = ref(props.theme)
  const showSelColor = ref(false);


  function changeColor(e: any) {
    if (e.isOk) {
      themeColer.value = "#" + e.hex;
    }
    showSelColor.value = false;
    emit("changeColor", {
      color: "#" + e.hex,
      isOk: e.isOk
    });
  }

  function shoePicker() {
    showSelColor.value = true;
  }

  watch(() =>props.theme, (val) => {
    themeColer.value = val
  })
</script>

<style lang="scss" scoped>
  .color-picker {
    display: inline-block;
    margin: 2px 4px;

    .color-show {
      width: 25px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #bdbdbd;
      border-radius: 3px;

      .color-item {
        width: 18px;
        height: 18px;
        border: 1px solid #3b3b3b;
      }
    }
  }
</style>